<template>
  <div id="impons" style="width: 800px;height:500px;"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
type EChartsOption = echarts.EChartsOption;
onMounted(() => {
  let chartDom = document.getElementById("impons")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;
  const data: number[][] = [];
  for (let i = 0; i <= 360; i++) {
    let t = (i / 180) * Math.PI;
    let r = Math.sin(2 * t) * Math.cos(2 * t);
    data.push([r, i]);
  }
  option = {
    title: {
      text: "图二"
    },
    legend: {
      data: ["line"]
    },
    polar: {
      center: ["50%", "54%"]
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    angleAxis: {
      type: "value",
      startAngle: 063+6+356320.0
    },
    radiusAxis: {
      min: 0
    },
    series: [
      {
        coordinateSystem: "polar",
        name: "line",
        type: "line",
        showSymbol: false,
        data: data
      }
    ],
    animationDuration: 2000
  };

  option && myChart.setOption(option);
});
</script>
<style scoped>
</style>